
<div class="layuimini-main" id="TimeGroup-edit">

    <div class="layui-form layuimini-form  layui-form-pane " lay-filter="TimeGroup_edit_div_filter">
        <fieldset class="table-search-fieldset">
            <legend><H2 id="lblTimeGroupEditName">开门时段2</H2></legend>
            <div style="margin: 3px 3px 3px 3px">
                <div class="layui-form-item">
                    <div class="layui-btn-group">
                        <button type="button" name="btnWeek" weekid="1" class="layui-btn layui-btn-radius layui-btn-primary">星期一</button>
                        <button type="button" name="btnWeek" weekid="2" class="layui-btn layui-btn-radius layui-btn-primary">星期二</button>
                        <button type="button" name="btnWeek" weekid="3" class="layui-btn layui-btn-radius layui-btn-normal">星期三</button>
                        <button type="button" name="btnWeek" weekid="4" class="layui-btn layui-btn-radius layui-btn-primary">星期四</button>
                        <button type="button" name="btnWeek" weekid="5" class="layui-btn layui-btn-radius layui-btn-primary">星期五</button>
                        <button type="button" name="btnWeek" weekid="6" class="layui-btn layui-btn-radius layui-btn-primary">星期六</button>
                        <button type="button" name="btnWeek" weekid="7" class="layui-btn layui-btn-radius layui-btn-primary">星期日</button>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-btn-group">
                        <button type="button" name="btnCopy" class="layui-btn layui-btn-radius layui-btn-primary">拷贝时段</button>
                        <button type="button" name="btnPaste" class="layui-btn layui-btn-radius layui-btn-primary">黏贴时段</button>
                        <button type="button" name="btnClear" class="layui-btn layui-btn-radius layui-btn-primary">清空</button>
                        <button type="button" name="btnClearAll" class="layui-btn layui-btn-radius layui-btn-primary">清空所有</button>
                        <button type="button" name="btnTestData" class="layui-btn layui-btn-radius layui-btn-primary">测试数据</button>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">时段1</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_1" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_1" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时段2</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_2" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_2" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">时段3</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_3" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_3" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时段4</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_4" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_4" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">时段5</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_5" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_5" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时段6</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_6" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_6" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">时段7</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_7" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_7" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时段8</label>
                        <div class="layui-input-inline" style="margin-right: 0px; width: 90px;">
                            <input type="text" maxlength="5" name="blockBegin_8" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" style=" width: 40px;">至</label>
                        <div class="layui-input-inline" style="width: 90px;">
                            <input type="text" maxlength="5" name="blockEnd_8" value="00:00" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-TimeGroup-btn"><i class="layui-icon">&#xe605;</i> 保存</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="btnTimeGroupEditClose"><i class="layui-icon">&#x1006;</i> 取消</button>
                    </div>
                </div>
            </div>

        </fieldset>

    </div>
</div>
<script>
    layui.use(['form', 'upload', 'faceAPI'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        var faceAPI = layui.faceAPI;
        var bIniOver = false;
        var iCurrentWeekid = 0;

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        faceAPI.TimeGroupEditPageResult = { result: false };
        var TimeGroupAll = faceAPI.TimeGroupEditPage;
        var WeekDays = [];


        //拆分开门时段
        for (var i = 1; i < 8; i++) {
            WeekDays[i] = TimeGroupAll["week" + i];
        }
        $('#lblTimeGroupEditName').html('开门时段' + TimeGroupAll.num);
        ShowWeekDetail(1);
        //console.log(WeekDays);

        $('[name=btnWeek]').on('click', function (p) {

            var target = $(p.currentTarget);
            /*            target.removeClass("layui-btn-primary").addClass("layui-btn-normal");*/
            var weekid = target.attr("weekid");
            ShowWeekDetail(weekid);
            return false;
        });


        var oSourceTimeDetail = null;
        
        //拷贝时段
        $('[name=btnCopy]').on('click', function (p) {
            if (!SaveWeekDetail()) return;

            oSourceTimeDetail = form.val("TimeGroup_edit_div_filter");
            return false;
        });
        //黏贴时段
        $('[name=btnPaste]').on('click', function (p) {
            if (oSourceTimeDetail == null) {
                layer.alert('请先复制一个时段！');
                return false;
            }
            form.val("TimeGroup_edit_div_filter", oSourceTimeDetail);
            return false;
        });
        //清空
        $('[name=btnClear]').on('click', function (p) {
            ClearCurrentDayTime();
            
            return false;
        });

        function ClearCurrentDayTime() {
            var oWeekDayDetail = {};
            for (var i = 1; i <= 8; i++) {
                oWeekDayDetail["blockBegin_" + i] = "00:00";
                oWeekDayDetail["blockEnd_" + i] = "00:00";
            }
            form.val("TimeGroup_edit_div_filter", oWeekDayDetail);
        };

        //清空所有
        $('[name=btnClearAll]').on('click', function (p) {

            ClearCurrentDayTime();
            for (var i = 1; i <= 7; i++) {
                WeekDays[i] = '00:00--00:00/00:00--00:00/00:00--00:00/00:00--00:00/00:00--00:00/00:00--00:00/00:00--00:00/00:00--00:00';
            }
            return false;
        });

        $('#btnTimeGroupEditClose').on('click', function () {
            faceAPI.TimeGroupEditPageResult = { result: false };
            layer.close(parentIndex);
            return false;
        });

        //设置测试数据
        $('[name=btnTestData]').on('click', function () {
            var oWeekDayDetail = {};

            var dBegin = dayjs().add(1,'minute');

            for (var i = 1; i <= 8; i++) {
                
                oWeekDayDetail["blockBegin_" + i] = dBegin.format("HH:mm");
                dBegin = dBegin.add(1, 'minute');
                oWeekDayDetail["blockEnd_" + i] = dBegin.format("HH:mm");
                dBegin = dBegin.add(2, 'minute');
            }
            form.val("TimeGroup_edit_div_filter", oWeekDayDetail);
            SaveWeekDetail();
            var sTimeDetail = WeekDays[iCurrentWeekid];
            for (var i = 1; i <= 7; i++) {
                WeekDays[i] = sTimeDetail;
            }
            return false;
        });

        
        
       
        function ShowWeekDetail(weekid) {
            //debugger;
            if (bIniOver) {//初始化结束才能保存

                if (!SaveWeekDetail()) return;
            }
            //debugger;
            $('[name=btnWeek]').removeClass("layui-btn-normal").addClass("layui-btn-primary");
            $('[name=btnWeek][weekid=' + weekid + ']').removeClass("layui-btn-primary").addClass("layui-btn-normal");

            //分拆当前星期的时段信息
            var weekDetail = WeekDays[weekid];
            var blocks = weekDetail.split("/");
            var oWeekDayDetail = {};
            for (var i = 0; i < blocks.length; i++) {
                var times = blocks[i].split("--");
                oWeekDayDetail["blockBegin_" + (i + 1)] = times[0];
                oWeekDayDetail["blockEnd_" + (i + 1)] = times[1];
            }
            form.val("TimeGroup_edit_div_filter", oWeekDayDetail);
            iCurrentWeekid = weekid;

        }

        function SaveWeekDetail() {
            if (iCurrentWeekid == 0) return;
            var oWeekDayDetail = form.val("TimeGroup_edit_div_filter");
            //debugger;
            var dayDetail = [];
            for (var i = 1; i <= 8; i++) {
                var times = [];
                var sBeginTime = oWeekDayDetail["blockBegin_" + i];
                var sEndTime = oWeekDayDetail["blockEnd_" + i];
                if (sBeginTime != '00:00')
                    //进行参数检查
                    if (!CheckTimeFormat(sBeginTime)) return false;
                if (sEndTime != '00:00')
                    if (!CheckTimeFormat(sEndTime)) return false;

                if (sBeginTime != sEndTime) {
                    var dBegin = dayjs('2021-07-20 ' + sBeginTime + ':00');
                    var dEnd = dayjs('2021-07-20 ' + sEndTime + ':00');
                    var bisBefore = dBegin.isBefore(dEnd, "minute") // 默认毫秒
                    if (!bisBefore) {
                        layer.alert('时间范围错误<br/>' + sBeginTime + ' -- ' + sEndTime);
                        return false;
                    }
                        
                }
                    
                times.push(sBeginTime);
                times.push(sEndTime);

                dayDetail.push(times.join("--"));
            }
            var weekDetail = dayDetail.join("/");
            WeekDays[iCurrentWeekid] = weekDetail;
            //console.log(weekDetail);
            return true;
        }

        function CheckTimeFormat(strTime) {
            //检查时间格式
            var bCheck = true;
            //debugger;
            if (strTime.length == 0) {
                bCheck = false;
            } else {
                if (bCheck && strTime.length != 5) {
                    bCheck = false;
                }
                else {
                    if (bCheck) {
                        var sNums = strTime.split(":");
                        if (sNums.length != 2) {
                            bCheck = false;
                        }
                        if (bCheck) {
                            if (sNums[0].length != 2) {
                                bCheck = false;
                            }
                            else {
                                //数字范围判断
                                if (isNaN(sNums[0])) {
                                    bCheck = false;
                                } else {
                                    var n = Number(sNums[0]);
                                    if (n > 23 || n < 0) {
                                        bCheck = false;
                                    }
                                }
                            }
                        }
                        if (bCheck) {
                            if (sNums[1].length != 2) {
                                bCheck = false;
                            } else {
                                if (isNaN(sNums[1])) {
                                    bCheck = false;
                                } else {
                                    var n = Number(sNums[1]);
                                    if (n > 59 || n < 0) {
                                        bCheck = false;
                                    }
                                }
                            }
                        }


                    }
                }
            }
            if (!bCheck) {
                layer.alert('时间格式错误，示例：08:30 HH:mm');
            }
            return bCheck;
        }


        form.on('submit(data-TimeGroup-btn)', function (data) {
            if (!SaveWeekDetail()) return;

            for (var i = 1; i < 8; i++) {
                TimeGroupAll["week" + i] = WeekDays[i];
            }


            var loadIndex = layer.load(1, { shade: [0.6, '#e2e2e2'] }); //0.1透明度的白色背景
            faceAPI.Ajax({
                type: 'Post',
                data: TimeGroupAll,
                url: '/api/TimeGroup/Update',
                success: function (result) {
                    layer.close(loadIndex);
                    if (result.result == false) {
                        layer.alert(result.error, { icon: 2 });
                    }
                    else {
                        faceAPI.TimeGroupEditPageResult = result;

                        layer.close(parentIndex);
                    }
                }
            });

            return false;
        });


        bIniOver = true;
    });


</script>
